<template>
  <el-container>
    <el-header>
      <div style="float: right">
        <router-link to="/login" class="log">登录</router-link>
        /
        <router-link to="/register" class="log">注册</router-link>
      </div>
    </el-header>
    <el-main>
      <el-carousel :interval="4000" type="card" height="200px" style="margin-left: 20px">
        <el-carousel-item v-for="(image,index) in images" :key="index">
          <img :src=image.url alt="图片加载失败" class="slideshow">
        </el-carousel-item>
      </el-carousel>
      <div style="background-color: #B3C0D1;height: 70%;margin-top: -3%">
      </div>
    </el-main>
  </el-container>
</template>
<script>
import axios from '@/Axios/axios'
export default {
  data() {
    return {
      images: []
    }
  },
  created() {
    axios.get('/system/pageHomeImages').then(res => {
      if(res.code === 200){
        this.images = res.data
      }else{
        this.$message.error("首页图片加载失败")
      }
    }).catch(err => {
      this.$message.error(err.message)
    })
  },
  mounted() {
  },
}
</script>

<style scoped>
.el-container {
  min-height: 100vh; /* 改用视口高度 */
  display: flex;
  flex-direction: column;
}

.el-main {
  flex: 1;  /* 允许主内容区域自适应填充 */
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slideshow {
  width: 100%;
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto;
}

.el-carousel__item--card {
  width: calc(45% - 60px) !important; /* 使用计算值确保间距 */
  height: auto !important; /* 自适应高度 */
  aspect-ratio: 16/9; /* 保持固定宽高比 */
  margin: 0 30px !important;
}

.log {
  text-decoration: none;
}


.blue-box-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器的高度自适应页面 */
}

/* 蓝色的圆角矩形框 */
.blue-box {
  width: 80%; /* 自适应宽度，可以根据需要调整 */
  height: 80%; /* 自适应高度 */
  border: 8px solid #07bec0; /* 蓝色边框 */
  border-radius: 80px; /* 圆角效果 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 使用 Grid 布局来分布按钮 */
.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3列 */
  grid-template-rows: repeat(3, 1fr); /* 创建3行 */
  gap: 20px; /* 设置按钮之间的间隙 */
  width: 90%;
  height: 90%;
  padding: 20px; /* 给 grid 区域加点内边距 */
  box-sizing: border-box;
}

</style>